<template>
  <div>
    <head-top goBack="true"></head-top>
    <div class="newPlaceholder"></div>
    <div>
      <a @click="goLogisticsDetails(orderdetail.CourierNumber,orderdetail.AppUrlStr)" class="top flex">
        <span>{{orderdetail.OrderState}}</span>
        <span class="flexGrow">{{orderdetail.OrderNum}}</span>
        <span class="iconfont icon-xuanzeqixiayige"></span>
      </a>
      <div class="head">
        <div class="title flex">
          <span class="iconfont icon-dingwei"></span>
          <span>收货地址</span>
        </div>
        <div class="detail flexBetween" >
          <div class="flexGrow">
            <div>
              <span>{{orderdetail.ReceiverName}}</span>
              <span>{{orderdetail.ReceiverPhone}}</span>
            </div>
            <div>{{orderdetail.ReceiverAddress}}</div>
          </div>
          <span class="iconfont icon-xuanzeqixiayige"></span>
        </div>
      </div>
      <div class="main flex" v-for="item in orderdetail.GiftList" v-bind:key="item.Id">
        <div class="flexCenter">
          <img :src="item.GiftImg" alt="">
        </div>
        <div class="flexGrow">
          <div class="flexBetween">
            <span>{{item.GiftName}}</span>
            <span>{{item.IntegralValue}}<span> 积分</span></span>
          </div>
          <div class="flexBetween">
            <span>分类：{{item.GiftTypeName}}</span>
            <span>×<span>{{item.GiftNum}}</span></span>
          </div>
          <!-- <div class="flexBetween">
              <span>颜色：{{color}}&#x3000;尺寸：{{size}}</span>
          </div> -->
        </div>
      </div>
      <div class="sendWay flexRight" style="color:#888">
        总计：<span style="color:#E51C23">{{orderdetail.TotalIntegralValue}}</span> 积分
      </div>
      <div class="sendWay flexBetween">
        <span>配送方式：</span>
        <div>
          <span>免邮</span>
          <span>{{sendWay}}</span>
        </div>
      </div>
      <div class="orderDetail">
        <div class="flex">
          <span>订单编号：</span>
          <span class="flexGrow">{{orderdetail.OrderNum}}</span>
        </div>
        <div class="flexBetween">
          <span>交易方式：</span>
          <span>{{changeWay}}</span>
        </div>
        <div class="flexBetween">
          <span>创建时间：</span>
          <span>{{orderdetail.CreateDate}}</span>
        </div>
      </div>
      <div class="footer" v-if="orderdetail.OrderState=='已发货'" @click="confirmreceive">
        {{btnName}}
      </div>
    </div>


  </div>
</template>
<script>
  import {Toast, MessageBox, Picker,Popup } from "mint-ui";
  import {getStore} from "../../../config/mUtils";
  import headTop from "src/components/header/newHead";

  export default {
    data() {
      return {
        sendWay: "普通快递",
        changeWay: "积分兑换",
        btnName: "确认收货",
        orderdetail: {},
        userinfo:{},
      }
    },
    components: {
      headTop,
    },
    methods: {

      getorderdetail(id) {
        this.$axios
          .get("integral.user.getorderdetail", {
            params: {
              Id: id
            }
          })
          .then(p => {
            this.orderdetail = p.data.result;
          });
      },
      goLogisticsDetails(CourierNumber, UrlStr) {
        if (CourierNumber != null && CourierNumber != "") {
          window.location = "http://m.kuaidi100.com/result.jsp?com=" + UrlStr + "&nu=" + CourierNumber;
        }
      },
       confirmreceive() {
        MessageBox.confirm('亲，确定宝贝已经收到了吗?').then((res) => {
          if (res == 'confirm') {
            this.$axios.post('integral.user.confirmorder', {Id: this.$route.query.id}).then((p) => {
              if (p.data.status == '10001') {
                Toast({
                  message: '收货成功',
                  iconClass: 'iconfont icon-dui',
                  duration: 1500
                });
                this.getorderdetail(this.$route.query.id);
              } else {
                Toast({
                  message: '收货失败',
                  iconClass: 'iconfont icon-cuo',
                  duration: 1500
                });
              }
            })
          }
        });
      }
    },
    created() {
      this.userinfo = getStore("userInfo");
      this.getorderdetail(this.$route.query.id);
    },
  }
</script>
<style lang="scss" scoped>



  .top {
    color: black;
    background-color: white;
    padding: .26087rem .652174rem;
    margin-bottom: .26087rem;

    > span:nth-child(1) {
      font-size: .608696rem;
      color: #FA9D26;
      margin-right: .869565rem;
    }

    > span:nth-child(2) {
      font-size: .521739rem;
    }

    > span:nth-child(2), span:nth-child(3) {
      color: #888888;
    }

    > span:nth-child(3) {
      font-size: .695652rem;
    }
  }

  .head {
    background-color: white;

    .title {
      padding: .26087rem .652174rem;
      border-bottom: 1px solid #eee;

      span:nth-child(1) {
        font-size: .869565rem;
        color: #4BA9F3;
        margin-right: .434783rem;
      }

      span:nth-child(2) {
        font-size: .695652rem;
      }
    }

    .detail {
      padding: .26087rem .652174rem;

      > div {
        > div:nth-child(1) {
          > span:nth-child(1) {
            font-size: .695652rem;
          }

          > span:nth-child(2) {
            font-size: .608696rem;
          }
        }

        > div:nth-child(2) {
          font-size: .521739rem;
          color: #888;
        }
      }

      > span {
        color: #999;
      }
    }
  }

  .main {
    padding: .652174rem;
    background-color: white;
    margin: .434783rem 0;

    > div:nth-child(1) {
      width: 3.478261rem;
      height: 3.478261rem;
      overflow: hidden;

      img {
        width: 100%;
      }
    }

    > div:nth-child(2) {
      padding-left: .652174rem;

      > div:nth-child(1) {
        > span:nth-child(1) {
          font-size: .608696rem;
        }

        > span:nth-child(2) {
          font-size: .695652rem;
          color: #E51C23;

          > span {
            font-size: .521739rem;
            color: #888888;
          }
        }
      }

      > div:nth-child(2) {
        > span:nth-child(1) {
          font-size: .521739rem;
          color: #888888;
        }

        > span:nth-child(2) {
          font-size: .608696rem;
        }
      }

      > div:nth-child(3) {
        font-size: .521739rem;
        color: #888888;
        margin: .217391rem 0;
      }

      > div:nth-child(4) {
        text-align: right;
        font-size: .608696rem;
        color: #888888;

        > span {
          color: #E51C23;
        }
      }
    }
  }

  .sendWay {
    font-size: .608696rem;
    padding: .434783rem .652174rem;
    background-color: white;

    > div {
      > span:nth-child(1) {
        font-size: .521739rem;
        background-color: #00A0E9;
        color: white;
        padding: .086957rem .217391rem;
        border-radius: .086957rem;
      }
    }
  }

  .orderDetail {
    font-size: .521739rem;
    color: #888;
    padding: .26087rem .652174rem;
    background-color: white;
    margin-top: .434783rem;

    > div {
      padding: .217391rem 0;
    }

    > div:nth-child(1) {
      > span:nth-child(2) {
        text-align: right;
      }
    }

    .btn {
      padding: .086957rem .434783rem;
      color: #888;
      border: 1px solid #eee;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FB5D57;
    color: white;
    height: 1.956522rem;
    line-height: 1.956522rem;
    text-align: center;
    font-size: .695652rem;
  }
</style>
